<!--#include file="header.html"-->
<div class="layui-row" style="margin-top: 20px;">
<!--#include file="left.html"-->
    <div class="layui-col-md9 layui-col-md-offset1">
        <span class="layui-breadcrumb">
            <a href="/index.html">首页</a>
            <a href="/user.html">会员中心</a>
            <a href="/user-links.html">调用记录</a>
            <a><cite>列表</cite></a>
        </span>

        <table class="layui-table" style="margin-top: 20px;">
            <colgroup>
                <col width="60">
                <col>
                <col width="140">
                <col width="180">
            </colgroup>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>短链地址</th>
                    <th>长链地址</th>
                    <th>添加时间</th>
                </tr>
            </thead>
            <tbody id="rows"> </tbody>
        </table>
        <div class="" id="pager"></div>
    </div>
</div>
<!--#include file="footer.html"-->
<script>
layui.use(['layer', 'jquery', 'laypage', 'element'], function() { 
    var $ = jQuery, laypage = layui.laypage;
    if (!has_login()) { 
        top.location.href = "/login.html";
    }
        
    var tbody = $("#rows");
    var show_rows = function(rows) { 
        tbody.empty();
        for (var i = 0; i < rows.length; i++) { 
            var r = rows[i];
            var short_url = 'http://' + location.hostname + '/' + r.code;
            var url_short = '<a href="' + short_url + '" target="_blank">' + short_url + '</a>';
            var url_long = '<a href="javascript:" url="' + r.origin_url + '" class="show_long">点击查看</a>';
            var tr = '<tr>' + 
                '<td>' + r.id + '</td>' +
                '<td>' + url_short + '</td>' + 
                '<td>' + url_long + '</td>' + 
                '<td>' + r.created + '</td>' + 
                '</tr>';
            tbody.append(tr);
        }
    };
    $(document).on('click', '.show_long', function() { 
        var that = $(this);
        var link = that.attr("url");
        layer.open({
            content: '<a href="' + link + '" target="_blank">' + link + '</a>'
        });
    });
    var auth_string = window.localStorage.getItem('authorization');
    var set_pager = function(pager, callback) { 
        laypage.render({
            'elem': 'pager',
            count: pager.rows_total,
            limit: pager.limit,
            curr: pager.current,
            jump: function(obj, first) { 
                if (first) { 
                    return;
                }
                callback(obj.curr);
            }
        });
    };
    var load_page = function(page) { 
        $.ajax({
            url: get_api_url("auth/users/links?page=" + page),
            headers: {
                "Authorization": 'Bearer ' + auth_string 
            },
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(res) { 
                if (res.code !== 0) { 
                    layer.alert(res.message, function() { 
                        window.localStorage.removeItem('authorization');
                        top.location.href = '/login.html';
                    }); 
                }  
                show_rows(res.result.rows);
                set_pager(res.result.pager, load_page);
            }
        });
    };
    load_page(1);
});
</script>
